<template>
  <div>
    <Form layout="inline" :rules="rules" ref="formRef" :model="formState">
      <FormItem label="命名空间">
        <Select
          v-model:value="formState.namespaceList"
          mode="multiple"
          maxTagCount="responsive"
          :options="namespaceOpts"
          placeholder="请选择"
          :style="{ width: '200px' }"
        ></Select>
      </FormItem>
      <FormItem label="所属应用">
        <Select
          v-model:value="formState.appIdList"
          mode="multiple"
          maxTagCount="responsive"
          :options="appList"
          placeholder="请选择"
          :style="{ width: '200px' }"
        ></Select>
      </FormItem>
      <FormItem v-if="formState.appIdList[0]" label="组件名称" name="componentIdList">
        <Select
          v-model:value="formState.componentIdList"
          mode="multiple"
          maxTagCount="responsive"
          :options="compoList"
          placeholder="请选择"
          :style="{ width: '200px' }"
        ></Select>
      </FormItem>
      <FormItem label="链路名称">
        <Select
          v-model:value="formState.routeLinkKeyList"
          mode="multiple"
          maxTagCount="responsive"
          :options="linkList"
          placeholder="请选择"
          :style="{ width: '200px' }"
        ></Select>
      </FormItem>
      <div class="btn-wrapper">
        <Tooltip title="查询">
          <Button type="primary" @click="search" shape="circle"
            ><template #icon><SearchOutlined /></template
          ></Button>
        </Tooltip>
        <Tooltip title="重置">
          <Button style="margin-left: 10px" @click="reset" shape="circle"
            ><template #icon><ReloadOutlined /></template
          ></Button>
        </Tooltip>
      </div>
    </Form>
  </div>
</template>
<script lang="ts" setup>
import { Tooltip, Form, FormItem, Button, Select } from 'ant-design-vue';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { reactive, ref, watchEffect } from 'vue';
import {
  getAppList,
  getCompoList,
  getNamespaceList,
  getRouteLink,
} from '/@/api/upgrade-center/grayscale/tagManagement/tagManagement';
import { Rule } from 'ant-design-vue/lib/form';

const formRef = ref();
const formState = reactive({
  componentIdList: [],
  routeLinkKeyList: [],
  namespaceList: [],
  appIdList: [],
});

const namespaceOpts = ref([]);
const appList = ref([]);
const compoList = ref([]);
const linkList = ref([]);
const getData = async () => {
  namespaceOpts.value = await getNamespaceList();
  appList.value = await getAppList();
  linkList.value = await getRouteLink();
};
getData();
watchEffect(async () => {
  if (formState.appIdList) {
    compoList.value = await getCompoList(formState.appIdList);
  } else {
    formState.componentIdList = [];
  }
});

const rules: Record<string, Rule[]> = {
  componentIdList: [{ required: true, message: '组件不能为空', trigger: 'change' }],
};
const handleValidate = async () => {
  return formRef.value.validate();
};
//查询
const emit = defineEmits(['get']);
const search = () => {
  handleValidate();
  if (formState.componentIdList.length != 0) {
    let searchParam = {
      componentIdList: formState.componentIdList,
      routeLinkKeyList: formState.routeLinkKeyList,
      namespaceList: formState.namespaceList,
    };
    emit('get', searchParam);
  }
};
//重置
const reset = () => {
  formState.componentIdList = [];
  formState.routeLinkKeyList = [];
  formState.namespaceList = [];
  formState.appIdList = [];
  let searchParam = {
    componentIdList: [],
    routeLinkKeyList: [],
    namespaceList: [],
  };
  emit('get', searchParam);
};
</script>
<style lang="less"></style>
